<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜂窝煤旅游网</title>
    <link rel="stylesheet" href="CSS/orderstyle.css">
    <script type="text/javascript" src="js/jqueryorder.js"></script>
    <script type="text/javascript" src="js/orderList.js"></script>
    <script type="text/javascript" src="js/recordPaint.js"></script>
</head>
<script type="text/javascript">
    $(function () {
        $("#orderLink").click(function () {
            $(this).addClass("selected");
            $("#recordLink").removeClass("selected");
            $("#lotteryLink").removeClass("selected");

            $("#orderContent").show();
            $("#recordContent").hide();
            $("#lotteryContent").hide();
        });

        $("#recordLink").click(function () {
            $(this).addClass("selected");
            $("#orderLink").removeClass("selected");
            $("#lotteryLink").removeClass("selected");

            $("#orderContent").hide();
            $("#recordContent").show();
            $("#lotteryContent").hide();
        });

        $("#lotteryLink").click(function () {
            $(this).addClass("selected");
            $("#orderLink").removeClass("selected");
            $("#recordLink").removeClass("selected");

            $("#orderContent").hide();
            $("#recordContent").hide();
            $("#lotteryContent").show();
        });

        $.get("server.php",function (data) {
            initOrderList($("#orderList"),data);
        },"json");

        var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];
        recordPaint($("#recordCvs")[0],datas);

//        var lottery =new runLottery($("#lotteryCvs")[0]);
//        $("#btnLottery").click(function () {
//            lottery.start();
//        });

        var start = runLottery($("#lotteryCvs")[0]);
        $("#btnLottery").click(function () {
            start();
        });

    });
</script>
<body>
    <nav>
        <div class="logo">
            <a href="#" id="logo" style="background: url(images/logo.png);width: 50%; height: 100%;"></a>
        
        </div>
        <div style="margin-left: 250px; margin-top: -70px;" >
            <a href="#" id="e1">我的蜂窝煤</a>
               </div>
               <div style="margin-left: 1190px; margin-top: 40px;">
            <a href="#" id="e2" style="color: white;">返回蜂窝煤首页</a>
         </div>
    </nav>

    <div class="container">
        <div class="w">

            <dl id="playlist">
                <dt>我的蜂窝煤</dt>
                <dd><a href="#" id="orderLink" class="selected">我的订单</a></dd>
                <dd><a href="#" id="recordLink" >消费记录</a></dd>
            </dl>

            <div class="content">
                <div id="orderContent">
                    <table id="orderList" width="100%">
                        <tr>
                            <th width="50%">住宿地点</th>
                            <th width="10%">住宿时长</th>
                            <th width="10%">花费</th>
                            <th width="10%">
                                <select id="orderTime">
                                    <option value="1">最近三个月</option>
                                    <option value="2">今年内</option>
                                    <option value="3">2017年</option>
                                </select>
                            </th>
                            <th width="10%">
                                <select id="orderStatus">
                                    <option value="1">全部状态</option>
                                    <option value="2">未完成</option>
                                    <option value="3">已完成</option>
                                </select>
                            </th>
                            <th width="10%">操作</th>
                        </tr>

                    </table>
                </div>

                <div id="recordContent">
                    <canvas id="recordCvs" width="600" height="400">
                        您的浏览器不支持canvas
                    </canvas>
                </div>
            </div>
        </div>
    </div>

   <!--footer start-->
    <div id="footer" style="text-align: center;">
        <p>
            <span><a href="#">Copyright</a><font color="black"> © 2018 FengWoMei.cn </font><a href="index.jsp" target="_blank" title="蜂窝煤之家">蜂窝煤之家</a> <font color="black"> - Collect from </font><a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Internet</a></span>
        </p>
        <p>
            <span><font color="black"> All Rights Reserved.</font></span></p>
        <div class="clearfix">
        </div>
    </div>
    <!--footer end-->
</body>
</html>